---
title: コメント
icon: MessageSquareMore
---

import { IconWrapper } from '@/components/icon-wrapper'

<MetaData
  lang="ja-JP"
  meta={{
    preset: [{
      client: '@univerjs/preset-sheets-thread-comment',
      locale: '@univerjs/preset-sheets-thread-comment/locales/en-US',
      style: '@univerjs/preset-sheets-thread-comment/lib/index.css',
    }],
    plugins: [{
      client: '@univerjs/thread-comment',
    }, {
      client: '@univerjs/thread-comment-ui',
      locale: '@univerjs/thread-comment-ui/locale/en-US',
      style: '@univerjs/thread-comment-ui/lib/index.css',
    }, {
      client: '@univerjs/sheets-thread-comment',
      facade: '@univerjs/sheets-thread-comment/facade',
    }, {
      client: '@univerjs/sheets-thread-comment-ui',
      locale: '@univerjs/sheets-thread-comment-ui/locale/en-US',
      style: '@univerjs/sheets-thread-comment-ui/lib/index.css',
    }],
    server: 'Optional',
  }}
/>

コメントは、ドキュメント内でコメントや返信を追加できる機能で、チームメンバー間のコミュニケーションとコラボレーションを促進します。

## Preset Mode

### Installation

```package-install
npm install @univerjs/preset-sheets-thread-comment
```

### 使い方

```typescript
import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core'
import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US'
import { UniverSheetsThreadCommentPreset } from '@univerjs/preset-sheets-thread-comment' // [!code ++]
import UniverPresetSheetsThreadCommentEnUS from '@univerjs/preset-sheets-thread-comment/locales/en-US' // [!code ++]
import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'

import '@univerjs/preset-sheets-core/lib/index.css'
import '@univerjs/preset-sheets-thread-comment/lib/index.css' // [!code ++]

const { univerAPI } = createUniver({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      UniverPresetSheetsCoreEnUS,
      UniverPresetSheetsThreadCommentEnUS, // [!code ++]
    ),
  },
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsThreadCommentPreset(), // [!code ++]
  ],
})
```

#### コラボレーション機能との併用 <IconWrapper className="inline-flex" type="pro" size="xs" icon={null} />

`UniverSheetsCollaborationPreset` と [collaboration](/guides/sheets/features/collaboration) 機能を併用する場合、`UniverSheetsThreadCommentPreset` に `collaboration: true` オプションを渡してください:

```typescript
UniverSheetsThreadCommentPreset({
  collaboration: true, // [!code ++]
})
```

{/* ### Presets and Configuration */}

## Plugin Mode

### Installation

```package-install
npm install @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui
```

### 使い方

```typescript
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'
import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment' // [!code ++]
import { UniverSheetsThreadCommentUIPlugin } from '@univerjs/sheets-thread-comment-ui' // [!code ++]
import SheetsThreadCommentUIEnUS from '@univerjs/sheets-thread-comment-ui/locale/en-US' // [!code ++]
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment' // [!code ++]
import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui' // [!code ++]
import ThreadCommentUIEnUS from '@univerjs/thread-comment-ui/locale/en-US' // [!code ++]

import '@univerjs/thread-comment-ui/lib/index.css' // [!code ++]

import '@univerjs/sheets-thread-comment/facade' // [!code ++]

const univer = new Univer({
  locale: LocaleType.En_US,
  locales: {
    [LocaleType.En_US]: mergeLocales(
      ThreadCommentUIEnUS, // [!code ++]
      SheetsThreadCommentUIEnUS, // [!code ++]
    ),
  },
})

univer.registerPlugin(UniverThreadCommentPlugin) // [!code ++]
univer.registerPlugin(UniverThreadCommentUIPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsThreadCommentPlugin) // [!code ++]
univer.registerPlugin(UniverSheetsThreadCommentUIPlugin) // [!code ++]
```

#### コラボレーション機能との併用 <IconWrapper className="inline-flex" type="pro" size="xs" icon={null} />

collaboration 機能を使用する場合の設定例:

```package-install
npm install @univerjs-pro/thread-comment-datasource
```

```typescript
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource' // [!code ++]

univer.registerPlugin(UniverThreadCommentDataSourcePlugin) // [!code ++]
```

{/* ### Plugins and Configuration */}

## Facade API

Complete Facade API type definitions can be found in the [FacadeAPI](https://reference.univer.ai/en-US).

### セルへのコメント作成

`univerAPI.newTheadComment()` を使ってコメントビルダーを作成できます。これは `FTheadCommentBuilder` のインスタンスを返し、チェーンで各種プロパティを設定できます。

以下は [`FTheadCommentBuilder`](https://reference.univer.ai/en-US/classes/FTheadCommentBuilder) の主なメソッドです:

| メソッド | 説明 |
| ---- | ---- |
| setContent | コメントの内容を設定します |
| setPersonId | コメントの作成者 ID を設定します |
| setDateTime | コメントの日時を設定します |
| setId | コメントの ID を設定します |
| setThreadId | スレッド ID を設定します |

```typescript
// 新しいコメントを作成します
const richText = univerAPI.newRichText().insertText('hello univer')
const commentBuilder = univerAPI.newTheadComment()
  .setContent(richText)

console.log(commentBuilder.content.toPlainText())

// コメントをセル A1 に追加します
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()
const cell = fWorksheet.getRange('A1')
const result = await cell.addCommentAsync(commentBuilder)
```

### セルのコメントを取得

以下のメソッドでコメントを取得できます。これらは `FThreadComment` のインスタンスを返し、更新・削除・解決などの操作が可能です。

- `FWorkbook.getComments()`: ワークブック内のすべてのコメントを取得します
- `FWorksheet.getComments()`: ワークシート内のすべてのコメントを取得します
- `FRange.getComment()`: 範囲の左上セルのコメントを取得します
- `FRange.getComments()`: 範囲内のすべてのコメントを取得します

以下は [`FThreadComment`](https://reference.univer.ai/en-US/classes/FThreadComment) の主なメソッドです:

| メソッド | 説明 |
| ---- | ---- |
| getIsRoot | コメントがルートコメントかどうかを返します |
| getCommentData | コメントデータを取得します |
| getReplies | コメントへの返信一覧を取得します |
| getRange | コメントの範囲を取得します |
| getRichText | コメントのリッチテキストを取得します |
| deleteAsync | コメントとその返信を削除します |
| updateAsync | コメント内容を更新します |
| resolveAsync | コメントを解決します |
| replyAsync | コメントに返信します |

```typescript
// ワークブック内のすべてのコメントを取得します
const fWorkbook = univerAPI.getActiveWorkbook()
fWorkbook.getComments()

// アクティブなワークシート内のすべてのコメントを取得します
const fWorksheet = fWorkbook.getActiveSheet()
Worksheet.getComments()

const fRange = fWorksheet.getRange('A1:B2')
// セル A1 のコメントを取得します
fRange.getComment()

// 範囲 A1:B2 のすべてのコメントを取得します
fRange.getComments()
```

### コメントのクリア

- `FWorkbook.clearComments()`: ワークブック内のすべてのコメントをクリアします
- `FWorksheet.clearComments()`: ワークシート内のすべてのコメントをクリアします
- `FRange.clearCommentAsync()`: 範囲の左上セルのコメントをクリアします
- `FRange.clearCommentsAsync()`: 範囲内のすべてのコメントをクリアします

```typescript
// ワークブック内のすべてのコメントをクリアします
const fWorkbook = univerAPI.getActiveWorkbook()
await fWorkbook.clearComments()

// アクティブなワークシート内のすべてのコメントをクリアします
const fWorksheet = fWorkbook.getActiveSheet()
await fWorksheet.clearComments()

const fRange = fWorksheet.getRange('A1:B2')

// セル A1 のコメントをクリアします
await fRange.clearCommentAsync()

// 範囲 A1:B2 のすべてのコメントをクリアします
await fRange.clearCommentsAsync()
```

### コメント返信リストの取得

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// ワークシート内のすべてのコメントを取得します
const comments = fWorksheet.getComments()
comments.forEach((comment) => {
  // コメントがルートコメントの場合、その返信を取得します
  if (comment.getIsRoot()) {
    const replies = comment.getReplies()
    replies.forEach((reply) => {
      console.log(reply.getCommentData())
    })
  }
})
```

### コメントの更新 / 削除 / 解決 / 返信

```typescript
const fWorkbook = univerAPI.getActiveWorkbook()
const fWorksheet = fWorkbook.getActiveSheet()

// 新しいコメントを作成し、セル A1 に追加します
const richText = univerAPI.newRichText().insertText('hello univer')
const commentBuilder = univerAPI.newTheadComment()
  .setContent(richText)
  .setId('mock-comment-id')
const cell = fWorksheet.getRange('A1')
await cell.addCommentAsync(commentBuilder)

// 3 秒後にコメントを更新し、返信を追加します
setTimeout(async () => {
  // ID でコメントを取得して内容を更新します
  const comment = fWorksheet.getCommentById('mock-comment-id')
  const newRichText = univerAPI.newRichText().insertText('Hello Univer AI')
  await comment.updateAsync(newRichText)

  // 新しい返信コメントを作成して内容を設定します
  const replyText = univerAPI.newRichText().insertText('Hello Univer AI! GO! GO! GO!')
  const reply = univerAPI.newTheadComment().setContent(replyText)
  await comment.replyAsync(reply)
}, 3000)

// コメントを解決し、6 秒後に削除します
setTimeout(async () => {
  const comment = fWorksheet.getCommentById('mock-comment-id')
  await comment.resolveAsync()
  await comment.deleteAsync()
}, 6000)
```

### Event Listeners

Complete event type definitions can be found in [Events](https://reference.univer.ai/en-US/classes/FEventName).

コメントモジュールは、コメントの追加・更新・削除・解決状態の変更を監視するためのイベント群を提供します。すべてのイベントは `univerAPI.addEvent()` で購読できます。

#### コメント追加イベント

`univerAPI.Event.CommentAdded`: コメントが追加された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentAdded, (params) => {
  const { comment, workbook, worksheet, row, col } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentAdd`: コメントが追加される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentAdd, (params) => {
  const { comment, workbook, worksheet, row, col } = params

  // コメント追加操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

#### コメント更新イベント

`univerAPI.Event.CommentUpdated`: コメントが更新された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentUpdated, (params) => {
  const { comment, workbook, worksheet, row, col } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentUpdate`: コメントが更新される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentUpdate, (params) => {
  const { comment, workbook, worksheet, row, col, newContent } = params

  // コメント更新操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

#### コメント削除イベント

`univerAPI.Event.CommentDeleted`: コメントが削除された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentDeleted, (params) => {
  const { commentId, workbook, worksheet } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentDelete`: コメントが削除される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentDelete, (params) => {
  const { comment, workbook, worksheet, row, col } = params

  // コメント削除操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

#### コメント解決ステータスイベント

`univerAPI.Event.CommentResolved`: コメントの解決ステータスが変更された後にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.CommentResolved, (params) => {
  const { comment, row, col, resolved, workbook, worksheet } = params
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

`univerAPI.Event.BeforeCommentResolve`: コメントの解決ステータスが変更される前にトリガーします

```typescript
const disposable = univerAPI.addEvent(univerAPI.Event.BeforeCommentResolve, (params) => {
  const { comment, row, col, resolved, workbook, worksheet } = params

  // コメント解決操作をキャンセルします
  params.cancel = true
})

// イベントリスナーを削除するには `disposable.dispose()` を使用してください
```

すべてのイベントは次の共通パラメータを含みます:

- `workbook`: 現在のワークブックインスタンス
- `worksheet`: 現在のワークシートインスタンス
- `row`: コメントの行インデックス
- `col`: コメントの列インデックス
- `comment`: コメントオブジェクト（削除イベントでは `commentId` のみ含まれます）

特殊パラメータ:

- `BeforeCommentUpdate` イベントには `newContent` が含まれます: 新しいコメント内容 (RichTextValue 型)
- `CommentResolved` および `BeforeCommentResolve` イベントには `resolved` が含まれます: コメントの解決ステータス

すべての `Before` プレフィックス付きイベントコールバックは `params.cancel = true` を返すことで該当する操作を防ぐことができます。
